<template>
	<view>
		<view class="detail_nav pore">
			<u-navbar title="" bgColor="transparent">
				<view class="flex" slot="left">
					<view class="nav-left flex">
						<u-icon name="arrow-left" size="24" @click="back"></u-icon>
						<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
						<u-icon name="home" size="24" @click="toHome"></u-icon>
					</view>
				</view>
				<view class="flex" slot="right" :style="{'marginRight':menuWidth + 'px'}">
					<view class="nav-left flex">
						<view class="wx">
							<button open-type="share">
								<u-icon name="share-square" size="24" color="#34314F"></u-icon>
							</button>
						</view>
						<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
						<view @click="starlikeBtn(2,4,id)">
							<u-icon :name="detail.isLike == 1?'heart-fill':'heart'" size="24"
								:color="detail.isLike == 1?'#FF5372':'#34314F'"></u-icon>
						</view>
					</view>
				</view>
			</u-navbar>
		</view>
		<view class="uni-margin-wrap food">
			<!-- <swiper class="swiper" circular indicator-dots autoplay :interval="3000" indicator-active-color="#FFDE6D">
				<swiper-item v-for="(item,index) in detail.imgs" :key="index">
					<image :src="api_host + item" mode="widthFix" class="width100"></image>
				</swiper-item>
			</swiper> -->
			<view v-if="detail.images">
				<ban-swiper :list="detail.imgs"></ban-swiper>
			</view>
		</view>
		<view class="content-box p30 pore">
			<view class="flex-jus">
				<text class="bold c343 f36">{{detail.title}}</text>
				<view class="vip textR pore">
					<image src="../../foodpages/static/images/food/vip.png" mode="heightFix"></image>
					<view class="cfff f24 year">{{detail.badge}}</view>
				</view>
			</view>
			<u-gap height="5"></u-gap>
			<view class="f24 c343">“{{detail.intro}}”</view>
			<u-gap height="10"></u-gap>
			<view class="flex-jus flex-end">
				<view class="">
					<view class="flex">
						<image src="../static/images/food/icon1.png" mode="" style="width:30rpx;height: 30rpx;"></image>
						<view class="f24 flex ml20 flex1">
							<text class="c343 flex1">{{detail.feature}}</text>
							<text class="cyellow ml20">¥{{detail.priceTag}}<!-- /人 --></text>
						</view>
					</view>
					<view class="flex mt20">
						<image src="../static/images/food/icon2.png" mode="" style="width:30rpx;height: 30rpx;"></image>
						<view class="f24 flex ml20">
							<text class="c343">{{detail.businessHours}}</text>
						</view>
					</view>
					<view class="flex mt20 flex-start">
						<image src="../static/images/food/icon3.png" mode="" style="width:30rpx;height: 30rpx;"></image>
						<view class="f24 flex ml20">
							<text class="c343">{{detail.addr}}<br> 距离{{detail.distance}}km</text>
						</view>
					</view>
				</view>
				<view class="flex">
					<view class="radius50 bgFff p30 textC">
						<view class="" @click="openAddress()">
							<image src="../static/images/food/address.png" mode="" style="width:50rpx;height: 50rpx;">
							</image>
						</view>
						<view class="c343 f26">地图</view>
					</view>
					<view class="radius50 bgFff p30 textC ml30" @click="maketel(detail.phone)">
						<view class="">
							<image src="../static/images/food/tel.png" mode="" style="width:50rpx;height: 50rpx;">
							</image>
						</view>
						<view class="c343 f26">电话</view>
					</view>
				</view>
			</view>
			<u-line color="#ddd" margin="30rpx 0"></u-line>
			<view class="flex-au">
				<view v-for="(item,index) in navList" :key="index" class="c999 f32"
					:class="{'active pore':navIndex == index}" @click="navClick(index)">
					{{item.name}}
				</view>
			</view>
			<u-gap height="20"></u-gap>
			<scroll-view :scroll-into-view="scrollViewId" scroll-y="true" scroll-with-animation="true">
				<view class="bgFff radius50 p30" id="store" v-if="detail.introduction">
					<!-- <view class="f26 c343">
						<u-parse :content="detail.introduction"></u-parse>
					</view> -->
					<u-read-more :showHeight="200" toggle closeText="展开全部" openText="收起" textIndent="0" color="#34314F"
						ref="uReadMore">
						<u-parse :content="detail.introduction"></u-parse>
					</u-read-more>
				</view>
				<u-gap height="20"></u-gap>
				<view class="f28 bold c343 mb20" id="note">美食笔记</view>
				<view class="" v-if="listData.length > 0">
					<foot-notes :dataArray="listData"></foot-notes>
				</view>
			</scroll-view>
		</view>
		<u-gap height="100"></u-gap>
		<view class="fix-bot">
			<view class="bottom-box">
				<view class="flex-jus ml30 mr30">
					<view class="flex1 box_shadow radius50">
						<u-button color="#FFDE6D" :customStyle="{'color':'#34314F','height':'96rpx','fontWeight':'bold','fontSize':'32rpx'}" shape="circle"
							@click="nologinJump('/pages/release/index')">
							发布
						</u-button>
					</view>
					<view class="flex-au flex1 ml30 right-box radius50 box_shadow">
						<view class="ml20" @click="starlikeBtn(2,4,id)">
							<u-icon :name="detail.isLike == 1?'heart-fill':'heart'" size="28"
								:color="detail.isLike == 1?'#FF5372':'#34314F'" :label="detail.likeVolume"
								labelPos="right" labelSize="14"
								labelColor="34314F"></u-icon>
						</view>
						<view class="mr20" @click="starlikeBtn(1,4,id)">
							<u-icon :name="detail.isCollection == 1?'star-fill':'star'" size="28"
								:color="detail.isCollection == 1?'#FFBB58':'#34314F'" :label="detail.collectionVolume"
								labelPos="right" labelSize="14"
								labelColor="#34314F"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<u-gap height="20"></u-gap>
		</view>
		<view class="back-top pore">
			<u-back-top :scroll-top="scrollTop" bottom="200" :customStyle="{'backgroundColor':'#FFDE6D'}"
				:iconStyle="{'color':'#000','fontSize':'40rpx','fontWeight':'bold'}"></u-back-top>
		</view>
	</view>
</template>

<script>
	import footNotes from '@/components/foodNotes/index.vue'
	import {
		getStoreinfo
	} from '@/common/api_wan.js'
	import {
		userLike
	} from '@/common/api_wan.js'
	import banSwiper from '@/components/banSwiper/index.vue'
	export default {
		name: '',
		components: {
			banSwiper,
			footNotes
		},
		data() {
			return {
				scrollTop:0,
				id: '',
				longitude: 30.205922,
				latitude: 115.082256,
				detail: {},
				scrollViewId: 'one',
				navList: [{
						name: '商家',
						value: '1',
						tab:'store'
					},
					{
						name: '美食笔记',
						value: '2',
						tab:'note'
					}
				],
				navIndex: 0,
				listData: []
			}
		},
		onLoad(option) {
			this.id = option.id
			// #ifdef MP-WEIXIN
			this.getLocation()
			// #endif
			// #ifdef H5
			this.getStoreinfo()
			// #endif
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onShareAppMessage(res) {
			return {
				title: '东楚畅通',
				path: '/foodpages/food/detail?id=' + this.detail.id,
				desc: this.detail.title,
				content: this.detail.intro,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			toHome() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			parseload() {
				setTimeout(() =>{
					this.$refs.uReadMore.init();
				},1000)
			},
			getLocation() {
				const that = this
				uni.getLocation({
					success(res) {
						const {
							latitude,
							longitude
						} = res
						that.longitude = longitude
						that.latitude = latitude
						that.getStoreinfo()
					}
				})
			},
			async getStoreinfo() {
				uni.showLoading({
					mask: true
				})
				const res = await getStoreinfo({
					id: this.id,
					longitude: this.longitude,
					latitude: this.latitude
				})
				if (res.code == 200) {
					this.detail = res.data
					const {
						images,
						userVlogs
					} = this.detail
					this.detail.imgs = images ? images.split(',') : []
					this.listData = userVlogs
					this.parseload()
				}
				uni.hideLoading()
			},
			navClick(index) {
				this.navIndex = index
				this.scrollViewId = this.navList[this.navIndex].tab
				uni.createSelectorQuery().select('#' + this.scrollViewId).boundingClientRect(data => { //目标位置的节点：类或者id
					uni.createSelectorQuery().select(".content-box").boundingClientRect(res => { //最外层盒子的节点：类或者id
						uni.pageScrollTo({
							duration: 100, //过渡时间
							scrollTop: data.top - res.top + 40 //到达距离顶部的top值
						})
					}).exec()
				}).exec();
			},
			openAddress() {
				uni.openLocation({
					latitude: Number(this.detail.latitude),
					longitude: Number(this.detail.longitude),
					name: this.detail.title,
					address: this.detail.addr
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FEF4E8;
	}

	.detail_nav {
		z-index: 999;
	}

	.nav-left {
		border-radius: 50rpx;
		padding: 10rpx 20rpx;
		background-color: rgba(#fff, 0.8);
	}

	.swiper {
		height: 500rpx;
	}

	.content-box {
		margin-top: -60rpx;
		background-color: #FEF4E8;
		border-radius: 50rpx 50rpx 0 0;

		.vip {
			image {
				height: 50rpx;
			}

			.year {
				position: absolute;
				right: 20rpx;
				top: 0;
				width: 100%;
				height: 50rpx;
				line-height: 50rpx;
			}
		}

		.active {
			color: #34314F;
			font-weight: bold;
			z-index: 10;
		}

		.active::after {
			position: absolute;
			content: '';
			left: -20rpx;
			top: 0;
			height: 100%;
			width: 70rpx;
			border-radius: 30rpx;
			background-color: #FEF4E8;
			background-image: linear-gradient(to right, #FFDE6D, #FFF1A6);
			z-index: -1;
		}
	}

	.bottom-box {
		.right-box {
			height: 100rpx;
			background-color: rgba(255,255,255, 0.9);
		}
	}
</style>